<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title>菜单管理</title>
    <link rel="stylesheet" href="/static/layui/css/layui.css">
</head>

<body class="layui-layout-body">
    <!-- 布局代码与用户管理类似，省略重复部分 -->

    <div class="layui-body" style="padding: 0; position: absolute; top: 0; bottom: 0; left: 0; right: 0;">
        <div style="padding: 15px;">
            <div class="layui-row">
                <div class="layui-col-md12">
                    <h1>菜单管理</h1>

                    <div style="margin-bottom: 20px;">
                        <button class="layui-btn" id="addMenuBtn">添加菜单</button>
                    </div>

                    <table class="layui-table" lay-data="{id:'menuTable', height:'full-150', page:true}"
                        lay-filter="menuTable">
                        <thead>
                            <tr>
                                <th lay-data="{field:'id', width:80, sort:true}">ID</th>
                                <th lay-data="{field:'name', width:250}">菜单名称</th>
                                <th lay-data="{field:'parent_name', width:200}">父菜单</th>
                                <th lay-data="{field:'url', width:300}">URL</th>
                                <th lay-data="{field:'action', width:200, toolbar:'#menuActionBar'}">操作</th>
                            </tr>
                        </thead>
                        <tbody>
                            {% for menu in menus %}
                            <tr>
                                <td>{{ menu.id }}</td>
                                <td>
                                    {% if menu.parent_id %}
                                    {{ menu.name|escape }}
                                    {% else %}
                                    {{ menu.name|escape }}
                                    {% endif %}
                                </td>
                                <td>{{ menu.parent.name|escape if menu.parent else '无' }}</td>
                                <td>{{ menu.url }}</td>
                                <td></td>
                            </tr> {% endfor %}
                        </tbody>
                    </table>
                </div>
            </div>
        </div>
    </div> <!-- 添加/编辑菜单表单 -->
    <div id="menuForm" style="display: none; padding: 20px;">
        <form class="layui-form" lay-filter="menuForm"> <input type="hidden" name="id">
            <div class="layui-form-item">
                <label class="layui-form-label">菜单名称</label>
                <div class="layui-input-block">
                    <input type="text" name="name" required lay-verify="required" placeholder="请输入菜单名称"
                        autocomplete="off" class="layui-input">
                </div>
            </div>
            <div class="layui-form-item"> <label class="layui-form-label">父菜单</label>
                <div class="layui-input-block"> <select name="parent_id" lay-verify="" lay-search>
                        <option value="">无（一级菜单）</option>
                        {% for menu in parent_menus %}
                        <option value="{{ menu.id }}">{{ menu.name|escape }}</option>
                        {% endfor %}
                    </select> </div>
            </div>
            <div class="layui-form-item"> <label class="layui-form-label">URL</label>
                <div class="layui-input-block"> <input type="text" name="url" required lay-verify="required"
                        placeholder="请输入 URL" autocomplete="off" class="layui-input"> </div>
            </div>
            <div class="layui-form-item"> <label class="layui-form-label">排序</label>
                <div class="layui-input-block"> <input type="number" name="order" value="0" placeholder="请输入排序号"
                        autocomplete="off" class="layui-input"> </div>
            </div>
            <div class="layui-form-item">
                <div class="layui-input-block"> <button class="layui-btn" lay-submit
                        lay-filter="menuFormSubmit">提交</button> <button type="reset"
                        class="layui-btn layui-btn-primary">重置</button> </div>
            </div>
        </form>
    </div> <!-- 操作列模板 -->
    <script type="text/html"
        id="menuActionBar"> <a class="layui-btn layui-btn-xs" lay-event="edit">编辑</a> <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a> </script>
    <script src="/static/layui/layui.js"></script>
    <script> layui.use(['table', 'form', 'jquery', 'layer'], function () {
            var table = layui.table; var form = layui.form; var $ = layui.jquery; var layer = layui.layer;
            // 添加菜单 
            $('#addMenuBtn').on('click', function () {
                layer.open({
                    type: 1, title: '添加菜单',
                    area: ['500px', '400px'],
                    content: $('#menuForm'),
                    success: function () {
                        form.val('menuForm', {
                            id: '',
                            name: '',
                            parent_id: '',
                            url: '',
                            order: 0
                        });
                        // 重新渲染表单，确保下拉框正确显示
                        form.render();
                    }
                });
            });
            // 表格操作 
            table.on('tool(menuTable)', function (obj) {
                var data = obj.data;
                if (obj.event === 'del') {
                    layer.confirm('确认删除该菜单吗？', function (index) {
                        $.post('/admin/menus/delete/' + data.id, function (res) {
                            if (res.success) {
                                obj.del();
                                layer.close(index);
                            } else {
                                layer.msg(res.msg || '删除失败');
                            }
                        });
                    });
                } else if (obj.event === 'edit') {
                    layer.open({
                        type: 1,
                        title: '编辑菜单',
                        area: ['500px', '400px'],
                        content: $('#menuForm'),
                        success: function () {
                            form.val('menuForm', {
                                id: data.id,
                                name: data.name,
                                parent_id: data.parent_id || '',
                                url: data.url,
                                order: data.order || 0
                            });
                            // 重新渲染表单，确保下拉框正确显示
                            form.render();
                        }
                    });
                }
            });
            // 表单提交 
            form.on('submit(menuFormSubmit)', function (data) {
                var url = data.field.id ? '/admin/menus/edit/' + data.field.id : '/admin/menus/add';
                $.post(url, data.field, function (res) {
                    if (res.success) {
                        layer.msg('操作成功', { icon: 1 });
                        setTimeout(function () { window.location.reload(); }, 1000);
                    }
                    else { layer.msg(res.msg || '操作失败', { icon: 2 }); }
                });
                return false;
            });
        }); 
    </script>
</body>

</html>